<template>
	<jf-navigation showBorder>
		<view>{{$t('index.userinfo.navigation')}}</view>
	</jf-navigation>
	
	<view class="userinfo_item" @click="selImage()">
		<view class="userinfo_label">{{$t('index.userinfo.portrait')}}</view>
		<view class="userinfo_right">
			<image :src="form.avatar || headerIcon" mode="aspectFill" class="userinfo_right_portrait"></image>
			<image src="@/static/images/index/icon014.png" class="userinfo_right_arrow"></image>
		</view>
	</view>
	
	<view class="userinfo_item" @click="data.showName = !data.showName">
		<view class="userinfo_label">{{$t('index.userinfo.name')}}</view>
		<view class="userinfo_right">
			<view :class="{'userinfo_right_active': form.nickname}">{{form.nickname || $t('index.userinfo.placeholderName')}}</view>
			<image src="@/static/images/index/icon014.png" class="userinfo_right_arrow"></image>
		</view>
	</view>
	
	<view class="userinfo_item" @click="data.showSex = !data.showSex">
		<view class="userinfo_label">{{$t('index.userinfo.sex')}}</view>
		<view class="userinfo_right">
			<view :class="{'userinfo_right_active': data.sex}">{{data.sex || $t('index.userinfo.placeholderSex')}}</view>
			<image src="@/static/images/index/icon014.png" class="userinfo_right_arrow"></image>
		</view>
	</view>
	
	<view class="userinfo_item" @click="data.showBirthday = !data.showBirthday">
		<view class="userinfo_label">{{$t('index.userinfo.birthday')}}</view>
		<view class="userinfo_right">
			<view :class="{'userinfo_right_active': form.birthday}">{{form.birthday || $t('index.userinfo.placeholderBirthday')}}</view>
			<image src="@/static/images/index/icon014.png" class="userinfo_right_arrow"></image>
		</view>
	</view>
	
	<view class="userinfo_item" @click="data.showCountry = !data.showCountry">
		<view class="userinfo_label">{{$t('index.userinfo.country')}}</view>
		<view class="userinfo_right">
			<view :class="{'userinfo_right_active': form.iso}">{{data.country || $t('index.userinfo.placeholderCountry')}}</view>
			<image src="@/static/images/index/icon014.png" class="userinfo_right_arrow"></image>
		</view>
	</view>
	
	<view class="userinfo_item" @click="data.showSignature = !data.showSignature">
		<view class="userinfo_label">{{$t('index.userinfo.signature')}}</view>
		<view class="userinfo_right">
			<view :class="{'userinfo_right_active': form.mark}">{{form.mark ? form.mark : $t('index.userinfo.placeholderSignature')}}</view>
			<image src="@/static/images/index/icon014.png" class="userinfo_right_arrow"></image>
		</view>
	</view>
	
	<jf-popup :title="$t('index.userinfo.pickerName')" :confirmText="$t('common.operate.save')" :cancelText="$t('common.operate.cancel')" :maxlength="10" v-model="data.showName" @confirm="save()">
		<view class="userinfo_name">
			<jf-input :placeholder="$t('index.userinfo.placeholderName')" v-model="form.nickname"></jf-input>
			<view class="userinfo_name_prompt">{{$t('index.userinfo.promptName')}}</view>
		</view>
	</jf-popup>
	<jf-picker mode="date" v-model:show="data.showBirthday" v-model="form.birthday" :title="$t('index.userinfo.pickerBirthday')" :confirmText="$t('common.operate.confirm')" :cancelText="$t('common.operate.cancel')" :units="[$t('common.date.year'), $t('common.date.month'), $t('common.date.date')]" @confirm="save()"></jf-picker>
	<jf-picker :range="data.countrys" :title="$t('index.userinfo.pickerCountry')" :confirmText="$t('common.operate.confirm')" :cancelText="$t('common.operate.cancel')" v-model:show="data.showCountry" v-model="form.iso" v-model:label="data.country" @confirm="save()"></jf-picker>
	<jf-picker :range="data.sexs" :title="$t('index.userinfo.pickerSex')" :confirmText="$t('common.operate.confirm')" :cancelText="$t('common.operate.cancel')" v-model:show="data.showSex" v-model="form.sex" v-model:label="data.sex" @confirm="save()"></jf-picker>
	<jf-popup :title="$t('index.userinfo.pickerSignature')" :confirmText="$t('common.operate.save')" :cancelText="$t('common.operate.cancel')" :maxlength="10" v-model="data.showSignature" @confirm="save()">
		<view class="userinfo_signature">
			<textarea v-model="form.mark" class="userinfo_signature_input" :placeholder="$t('index.userinfo.placeholderSignature')" :maxlength="100"></textarea>
			<view class="userinfo_signature_prompt">
				{{form.mark ? form.mark.length : 0}}/100
			</view>
		</view>
	</jf-popup>
</template>

<script lang="ts" setup>
	import headerIcon from "@/static/images/common/header_icon.png"
	import { reactive, onMounted, nextTick, getCurrentInstance } from 'vue';
	import { useStore } from "@/store/main"
	import { upload } from "@/api/common"
	import { saveUserinfo } from "@/api/login"
	
	const store = useStore()
	const { proxy } = getCurrentInstance()
	const data = reactive({
		showName: false,
		showBirthday: false,
		showCountry: false,
		showSex: false,
		showSignature: false,
		countrys: store.getCountryList,
		sexs: [],
		country: store.getCountryLabel(store.getUserinfo.iso),
		sex: ''
	})
	const form = reactive({
		avatar: store.getUserinfo.avatar,
		nickname: store.getUserinfo.nickname,
		birthday: store.getUserinfo.birthday,
		iso: store.getUserinfo.iso,
		sex: store.getUserinfo.sex,
		mark: store.getUserinfo.mark
	})
	
	const selImage = ():void => {
		uni.chooseImage({
			count: 1,
			success: (result:any) => {
				upload(
					result.tempFiles
				).then((res:any):void => {
					form.avatar = res[0].url
					save()
				}).catch(() => {
					uni.showToast({
						title: proxy.$t("index.userinfo.fail"),
						icon: "none"
					})
				})
			}
		})
	}
	const save = ():void => {
		saveUserinfo(form).then(() => {
			uni.showToast({
				title: proxy.$t("index.userinfo.success"),
				icon: "none"
			})
			store.setUserinfo(form)
		}).catch(() => {
			uni.showToast({
				title: proxy.$t("index.userinfo.fail"),
				icon: "none"
			})
		})
	}
	
	onMounted(()=>{
		nextTick(()=>{
			data.sexs = [
				{ label: proxy.$t('common.sex.man'), value: 1 },
				{ label: proxy.$t('common.sex.woman'), value: 2 },
				{ label: proxy.$t('common.sex.other'), value: 0 }
			]
			if(form.sex){
				data.sex = data.sexs.filter(item => item.value == form.sex)[0].label
			}
		})
	})
</script>

<style lang="scss">
	.userinfo_item{
		width: 686rpx;
		margin-left: 32rpx;
		@include layout();
		border-bottom: 2rpx solid #E7EAEE;
		padding: 32rpx 0;
		font-size: 28rpx;
		line-height: 32rpx;
		.userinfo_label{
			flex-shrink: 0;
			font-weight: 400;
			color: #535A69;
		}
		.userinfo_right{
			flex-grow: 1;
			@include layout(row, center, flex-end);
			margin-left: 16rpx;
			color: #A2A9B7;
			text-align: right;
			.userinfo_right_portrait{
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
			}
			.userinfo_right_arrow{
				flex-shrink: 0;
				width: 32rpx;
				height: 32rpx;
				margin-left: 4rpx;
			}
			.userinfo_right_active{
				color: var(--color-primary);
			}
		}
	}
	
	.userinfo_name{
		padding-top: 80rpx;
		.userinfo_name_prompt{
			width: 100%;
			padding: 0 48rpx;
			font-weight: 400;
			color: #A2A9B7;
			line-height: 32rpx;
			font-size: 24rpx;
			box-sizing: border-box;
		}
	}
	.userinfo_signature{
		width: 654rpx;
		margin: 80rpx 0 0 48rpx;
		background: #F6F8FA;
		height: 300rpx;
		border-radius: 16rpx;
		.userinfo_signature_input{
			width: 100%;
			height: 236rpx;
			padding: 32rpx;
			box-sizing: border-box;
			font-weight: 400;
			line-height: 32rpx;
			font-size: 32rpx;
		}
		.userinfo_signature_prompt{
			width: 100%;
			text-align: right;
			font-weight: 400;
			color: #A2A9B7;
			line-height: 32rpx;
			font-size: 32rpx;
			padding-right: 32rpx;
			box-sizing: border-box;
		}
	}
</style>